<template>
  <main class="pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
    <div class="pug-pro-page-container">
      <div class="pug-pro-page-container-warp">
        <div class="pug-page-header has-breadcrumb">
          <div class="pug-page-header-heading">
            <div class="pug-page-header-heading-left">
              <span class="pug-page-header-heading-title" title="分步表单">{{ opid ? '修改产品' : "添加产品" }}</span>
              编辑的id是:{{ opid }}
            </div>
          </div>
          <div class="pug-page-header-content">
            <div class="pug-pro-page-container-detail">
              <div class="pug-pro-page-container-main">
                <div class="pug-pro-page-container-row">
                  <div class="pug-pro-page-container-content">
                    酒店管理页用于向用户收集或验证信息，分步酒店管理常见于数据项较多的表单场景。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pug-pro-grid-content">
        <div class="pug-pro-grid-content-children">
          <div class="pug-pro-layout-watermark-wrapper" style="position: relative;">
            <div class="pug-pro-page-container-children-content">
              <div class="pug-card">
                <div class="pug-pro-steps-form-steps-container" style="max-width: 760px;padding: 20px 0">
                  <div class="pug-steps pug-steps-horizontal pug-steps-label-horizontal">
                    <div class="pug-steps-item" @click="next(1)"
                         :class="[currentStep>=1?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">1</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">基本信息</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(2)"
                         :class="[currentStep>=2?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">2</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">图集管理</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(3)"
                         :class="[currentStep>=3?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">2</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">明细控制</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(4)"
                         :class="[currentStep>=4?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">3</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">价格控制</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(5)"
                         :class="[currentStep>=5?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">4</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">产品描述</div>
                        </div>
                      </div>
                    </div>
                    <div class="pug-steps-item pug-steps-item-wait" @click="next(6)"
                         :class="[currentStep>=6?'pug-steps-item-process pug-steps-item-active':'']">
                      <div class="pug-steps-item-container">
                        <div class="pug-steps-item-tail"></div>
                        <div class="pug-steps-item-icon"><span class="pug-steps-icon">5</span></div>
                        <div class="pug-steps-item-content">
                          <div class="pug-steps-item-title">发布完成</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="currentStep==1" class="pug-card mt20">
                <div class="pug-card-body">
                  <div class="pug-debug-result">{{hotel}}</div>
                  <div class="pug-row" style="justify-content: center">
                      <div class="pug-col   pug-col-lg-3" style="padding-left: 8px; padding-right: 8px;">
                      <pug-upload @callback="uploadSuccess" modal="2" cref="img" uploadname="img"  v-model="hotel.img"></pug-upload>
                      <div style="display: none;"><pug-input  placeholder="请输入封面图" cref="img"  v-model="hotel.img" type="text"></pug-input></div>
                      </div>
                    <div class="pug-col pug-col-lg-8" style="padding:0 30px;">
                      <div autocomplete="off" class="pug-form pug-form-vertical pug-form-hide-required-mark">
                         <input type="hidden" v-model="hotel.id" cref="id"/>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="酒店分类">酒店分类
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入酒店分类" cref="hotelCategoryId" maxlen="20"  v-model="hotel.hotelCategoryId" type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="标题">标题
                                <span class='pug-valid-label'>(*必填)</span>
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入标题" cref="title" maxlen="200"  v-model="hotel.title" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="描述">描述
                                <span class='pug-valid-label'>(*必填)</span>
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                              <textarea rows="4" placeholder="请输入描述" id="description" v-model="hotel.description" maxlength="200" class="pug-input pro-field pro-field-xl"></textarea>
                            </div>
                            </div>
                          </div>
                        </div>

                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="国家">国家
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入国家" cref="contury" maxlen="100"  v-model="hotel.contury" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="省份">省份
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入省份" cref="province" maxlen="100"  v-model="hotel.province" type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="城市">城市
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入城市" cref="city" maxlen="100"  v-model="hotel.city" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="区域">区域
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入区域" cref="area" maxlen="100"  v-model="hotel.area" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>

                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="星级">星级
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                              <pug-radio v-model="hotel.starlevel" cref="starlevel" :items='[{text:"是",value:1},{text:"否",value:0}]' :is-value="false"></pug-radio>
                            </div>
                            </div>
                          </div>
                        </div>



                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="地址">地址
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入地址" cref="address" maxlen="200"  v-model="hotel.address" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                         <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                             <label class="pug-form-item-required" title="联系方式">联系方式
                             </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                             <div class="pug-form-item-control-input-content">
                                 <pug-input  placeholder="请输入联系方式" cref="phone" maxlen="50"  v-model="hotel.phone" type="text"></pug-input>
                            </div>
                            </div>
                          </div>
                        </div>
                        <div class="pug-row pug-form-item" style="row-gap: 0px;">
                          <div class="pug-col pug-form-item-label">
                            <label class="pug-form-item-required" title="标签">标签
                            </label>
                          </div>
                          <div class="pug-col pug-form-item-control">
                            <div class="pug-form-item-control-input">
                              <div class="pug-form-item-control-input-content">
                                <pug-input  placeholder="请输入标签" cref="tags" maxlen="100"  v-model="hotel.tags" type="text"></pug-input>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!--保存和下一步按钮-->
                        <div class="pug-space pug-space-horizontal pug-space-align-center"
                             style="flex-wrap: wrap; gap: 8px;">
                          <div class="pug-space-item" style="">
                             <router-link to="/hotel"><button  class="pug-btn pug-btn-primary mr10"><span><i class="iconfont icon-icon_arrow_left pr3 fz13"></i>返回</span></button></router-link>
                             <button type="button" v-if="!hotel.id" class="pug-btn pug-btn-primary mr3" @click="saveorupdate()"><span><i class="iconfont icon-tianjia pr3"></i>保存</span></button>
                             <button type="button" v-if="hotel.id" class="pug-btn pug-btn-primary mr3" @click="saveorupdate()"><span><i class="iconfont icon-quanbudingdan pr3"></i>编辑</span></button>
                           </div>
                          <div class="pug-space-item" style="">
                            <button type="button" class="pug-btn" @click="next(2)"><span>下一步</span>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-show="currentStep==2" class="pug-card mt20" style="padding: 20px;">
                <pug-upload @callback="uploadSuccess2" modal="3" :cref="imglists" uploadname="imglists" :single="true"></pug-upload>
                 <div class="pug-cobox-img">
                   <div v-for="(item,index) in hotelImageLists"><img :src="item" alt=""></div>
                 </div>
              </div>
             <div v-show="currentStep==3" class="pug-card mt20">
                3
             </div>
             <div v-show="currentStep==4" class="pug-card mt20">
                4
             </div>
             <div v-show="currentStep==5" class="pug-card mt20">
               <div class="pug-row pug-form-item" style="row-gap: 0px;">
                 <div class="pug-col pug-form-item-control">
                   <div class="pug-form-item-control-input">
                     <div class="pug-form-item-control-input-content">
                       <pug-editor :cheight="500" placeholder="酒店详细描述" target="imglists" v-model="hotel.description"></pug-editor>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <div v-show="currentStep==6" class="pug-card mt20">
               6
             </div>
         </div>
       </div>
     </div>
   </div>
 </div>
</main>
</template>
<script>
import hotelService from '@/services/hotel'
import pugDialog from "@/plugins/PugDialog";
import pugMessage from "@/plugins/PugMessage";
import {isEmpty,getById,isNotEmpty} from "@/utils/validate";
import cache from "@/utils/cache"
export default {
  name: "HotelAdd.vue",
  components: {},
  data() {
    return {
      opid: "",
      hotel:{
        id:"", // 主键
        title:"", // 标题
        img:"", // 封面图
        imglists:"", // 图集列表
        description:"", // 描述
        price:"", // 价格
        realprice:"", // 真实价格
        status:1 , // 发布状态
        isdelete:0 , // 删除状态
        views:"", // 浏览数数
        collects:"", // 收藏数
        buynum:"", // 购买数
        lan:"", // 经度
        lgt:"", // 纬度
        contury:"", // 国家
        city:"", // 城市
        area:"", // 区域
        province:"", // 省份
        starlevel:"", // 星级
        hotelCategoryId:"", // 酒店分类
        tags:"", // 标签
        hotelBrandId:"", // 酒店品牌分类
        hotelBrandName:"", // 品牌名称
        hotelCategoryName:"", // 酒店分类
        advice:"", // 通知
        hotelServiceItem:"", // 服务项目
        comments:"", // 评论数
        address:"", // 地址
        phone:"" // 联系方式
      },

      imglists:[],
      currentStep: 2,
      steps: [1, 2, 3]
    }
  },

  computed:{
    hotelImageLists () {
      var that = this;
      if(this.hotel.imglists && this.hotel.imglists.length > 0) {
        that.imglists = this.hotel.imglists.split(",");
        return that.imglists;
      }else{
        return [];
      }
    }
  },

  created() {

    // 根据id酒店管理明细
    if(!isEmpty(this.$route.params.id)){
      this.hotel.id = this.$route.params.id;
      this.opid = this.$route.params.id;
      // 加载明细
      this.getDetail();
    }else{
      if(isNotEmpty(cache.local.get("hotel_save"))) {
        this.hotel = cache.local.getJSON("hotel_save")
      }
    }
  },

   watch:{
      hotel:{
        deep:true,
        handler(val,newval){
          cache.local.setJSON("hotel_save",newval);
        }
      }
   },

  methods: {

    // 加载明细
    async getDetail(){
      try{
        const res = await  hotelService.getHotel(this.opid);
        this.hotel = res.data;
      }catch (err) {
        pugMessage.error("服务器异常,代号：1025");
      }
    },

    // 1: 保存方法
    async saveorupdate() {
        try{
            // 校验
            const vresult = await this.validator();
            if(!vresult){
                return;
            }

            //pugDialog.confirm('提示',"你确定进行【"+(this.hotel.id?'更新':'保存')+"】吗？").then(async ()=>{
                // 执行服务器数据保存酒店管理
                const res = await  hotelService.saveUpdateHotel(this.hotel);
                if(res.status == 200){
                    if(isEmpty(this.hotel.id)){
                        // 重置数据
                        this.reset();
                        cache.local.remove("hotel_save");
                        // 返回列表
                        pugMessage.success("添加成功");
                        this.$router.push("/hotel/list");
                    }else{
                        cache.local.remove("hotel_save");
                        // 返回列表
                        pugMessage.success("修改成功");
                        this.$router.push("/hotel/list");
                    }
                }
            })
        }catch(err){
            pugMessage.error("服务器异常,代号：1025");
        }
    },

    // 2: 校验
    async validator(){

        // if(isEmpty(this.hotel.title)){
        //    pugMessage.error("请输入标题");
        //    getById('title').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.img)){
        //    pugMessage.error("请输入封面图");
        //    getById('img').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.imglists)){
        //    pugMessage.error("请输入图集列表");
        //    getById('imglists').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.description)){
        //    pugMessage.error("请输入描述");
        //    getById('description').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.price)){
        //    pugMessage.error("请输入价格");
        //    getById('price').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.realprice)){
        //    pugMessage.error("请输入真实价格");
        //    getById('realprice').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.status)){
        //    pugMessage.error("请输入发布状态");
        //    getById('status').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.isdelete)){
        //    pugMessage.error("请输入删除状态");
        //    getById('isdelete').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.views)){
        //    pugMessage.error("请输入浏览数数");
        //    getById('views').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.collects)){
        //    pugMessage.error("请输入收藏数");
        //    getById('collects').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.buynum)){
        //    pugMessage.error("请输入购买数");
        //    getById('buynum').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.lan)){
        //    pugMessage.error("请输入经度");
        //    getById('lan').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.lgt)){
        //    pugMessage.error("请输入纬度");
        //    getById('lgt').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.contury)){
        //    pugMessage.error("请输入国家");
        //    getById('contury').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.city)){
        //    pugMessage.error("请输入城市");
        //    getById('city').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.area)){
        //    pugMessage.error("请输入区域");
        //    getById('area').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.province)){
        //    pugMessage.error("请输入省份");
        //    getById('province').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.starlevel)){
        //    pugMessage.error("请输入星级");
        //    getById('starlevel').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.hotelCategoryId)){
        //    pugMessage.error("请输入酒店分类");
        //    getById('hotelCategoryId').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.tags)){
        //    pugMessage.error("请输入标签");
        //    getById('tags').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.hotelBrandId)){
        //    pugMessage.error("请输入酒店品牌分类");
        //    getById('hotelBrandId').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.hotelBrandName)){
        //    pugMessage.error("请输入品牌名称");
        //    getById('hotelBrandName').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.hotelCategoryName)){
        //    pugMessage.error("请输入酒店分类");
        //    getById('hotelCategoryName').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.advice)){
        //    pugMessage.error("请输入通知");
        //    getById('advice').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.hotelServiceItem)){
        //    pugMessage.error("请输入服务项目");
        //    getById('hotelServiceItem').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.comments)){
        //    pugMessage.error("请输入评论数");
        //    getById('comments').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.address)){
        //    pugMessage.error("请输入地址");
        //    getById('address').focus();
        //    return false;
        // }
        //
        // if(isEmpty(this.hotel.phone)){
        //    pugMessage.error("请输入联系方式");
        //    getById('phone').focus();
        //    return false;
        // }

        return true;
    },

    // 3: 步骤分解
    prev(index) {
      this.currentStep = index;
    },

    next(index) {
      this.currentStep = index;
    },

    // 4: 文件上传回调
    uploadSuccess(response) {
      this.hotel.img = response.url;
    },

    uploadSuccess2(response){
      this.imglists.push(response.url);
      this.hotel.imglists = this.imglists.join(",");
    },

    // 5: 重置数据
    reset(){
        this.hotel = {
         citems: [{text:"请选择",value:""}],
         id:"", // 主键
         title:"", // 标题
         img:"", // 封面图
         imglists:"", // 图集列表
         description:"", // 描述
         price:"", // 价格
         realprice:"", // 真实价格
         status:"", // 发布状态
         isdelete:"", // 删除状态
         views:"", // 浏览数数
         collects:"", // 收藏数
         buynum:"", // 购买数
         lan:"", // 经度
         lgt:"", // 纬度
         contury:"", // 国家
         city:"", // 城市
         area:"", // 区域
         province:"", // 省份
         starlevel:"", // 星级
         hotelCategoryId:"", // 酒店分类
         tags:"", // 标签
         hotelBrandId:"", // 酒店品牌分类
         hotelBrandName:"", // 品牌名称
         hotelCategoryName:"", // 酒店分类
         advice:"", // 通知
         hotelServiceItem:"", // 服务项目
         comments:"", // 评论数
         address:"", // 地址
         phone:"" // 联系方式
       }
    },


  }
}
</script>
<style scoped="">

.pug-cobox-img{display: flex;justify-content: flex-start;flex-wrap:wrap;}
.pug-cobox-img div{margin: 10px;}
.pug-cobox-img div img{height: 240px;}
</style>
